<div class="main-content">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <ol class="breadcrumb">
                    <li>
                        <i class="clip-file"></i>
                        <a href="#">
                           Ventas
                        </a>
                    </li>
                    <li class="active">
                        Tabla Maestra
                    </li>					
                </ol>
                <div class="page-header">
                    <h1>Tabla Maestra <small> Nuevo Cliente</small></h1>
                </div>
            </div>
        </div>
      
      <div class="row">
            <div class="col-md-12">
                <!-- start: DYNAMIC TABLE PANEL -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="icon-external-link-sign"></i>
                        Clientes
                        <div class="panel-tools">
                            <a class="btn btn-xs btn-link panel-collapse collapses" href="#">
                            </a>
                            <a class="btn btn-xs btn-link panel-config" href="#panel-config" data-toggle="modal">
                                <i class="icon-wrench"></i>
                            </a>
                            <a class="btn btn-xs btn-link panel-refresh" href="#">
                                <i class="icon-refresh"></i>
                            </a>
                            <a class="btn btn-xs btn-link panel-expand" href="#">
                                <i class="icon-resize-full"></i>
                            </a>
                            <!--<a class="btn btn-xs btn-link panel-close" href="#">
                                <i class="icon-remove"></i>
                            </a> -->
                        </div>
                    </div>
                    <div class="panel-body">
                       
                         <form action="#" role="form" class="form-horizontal" >                            
                            <div class="row">
                                <div class="col-md-12"> 
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="cboTipPer">
                                                    Persona
                                                </label>
                                                <div class="col-sm-9">
                                                    <select id="cboTipPer" class="form-control search-select">
                                                        <option></option>
                                                        <option value="J">Jurídica</option>
                                                        <option value="N">Natural</option>
                                                    </select>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                                                    
                                    </div>
                                    <div class="row" id="personaNatural" hidden="true">
                                        <div class="col-md-6" >                            
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="txtNomCli">
                                                    Cliente
                                                </label>
                                                <div class="col-sm-9">
                                                    
                                                    <input type="text" placeholder="Ingrese nombre" id="txtNomCli" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="txtDniCli">
                                                    D.N.I
                                                </label>
                                                <div class="col-sm-9">
                                                    <input type="text" id="txtDniCli" placeholder="Ingrese D.N.I" value="0"> 
                                                </div>
                                            </div>
                                        </div>                                
                                    </div>
                                    <div class="row" id="personaJuridica" hidden="true">
                                        <div class="col-md-6" >                            
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="txtRazCli">
                                                    Razon Social
                                                </label>
                                                <div class="col-sm-9">
                                                   
                                                    <input type="text" placeholder="Ingrese Razón Social" id="txtRazCli" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="txtRucCli">
                                                    R.U.C
                                                </label>
                                                <div class="col-sm-9">
                                                    <input type="text" id="txtRucCli" placeholder="Ingrese R.U.C"> 
                                                </div>
                                            </div>
                                        </div>                                
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="txtDirCli">
                                                    Dirección
                                                </label>
                                                <div class="col-sm-9">      
                                                     <input type="hidden" id="txtCodPerNat" value="0">
                                                    <input type="text" id="txDirCli" placeholder="Ingrese Dirección" class="form-control">
                                                </div>
                                             </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="txtTelCli">
                                                    Teléfono
                                                </label>
                                                <div class="col-sm-9">
                                                    <input type="text" id="txtTelCli" placeholder="Ingrese Teléfono" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              
                            </div>
                            <hr>                          
                            <div class="row">
                                <div class="col-md-5"></div>
                                <div class="col-md-2">
                                    <button class="btn btn-yellow btn-block" type="button" id="guardarProd">
                                        <i class="icon-save"></i>
                                        Guardar                                        
                                    </button>
                                </div>
                                <div class="col-md-5"></div>
                            </div>
                        </form>  
                        
                    </div>
                </div>
                <!-- end: DYNAMIC TABLE PANEL -->
            </div>
        
        </div>   
        
    </div>
</div>

<script type="text/javascript">
$(function() {
     $("#cboTipPer").click(function() {          
        var per=$("#cboTipPer").val();
        if(per==="J"){$("#personaJuridica").hide();$("#personaNatural").show();
        }else if(per==="N"){$("#personaJuridica").show(); $("#personaNatural").hide();}
        else{ $("#personaJuridica").show();$("#personaNatural").show();
        }$("#personaJuridica").slideToggle();$("#personaNatural").slideToggle();});
    
    });

</script>